<template>
  <div class="hello">
    <h1 class="greeting">Hello {{ usename }}</h1>
    <p class="subtitle">欢迎回来，祝您使用愉快！</p>
  </div>
</template>

<script>
export default {
  name: "Hello",
  data() {
    return {
      usename: this.$store.state.username
    }
  },
  methods: {}
}
</script>

<style scoped>
.hello {
  padding: 40px;
  background-color: #f9f5f0;
  min-height: 100vh;
  color: #333;
}

.greeting {
  color: #E3D7C7;
  font-size: 2.5rem;
  margin-bottom: 10px;
  font-weight: 300;
  letter-spacing: 2px;
}

.subtitle {
  color: #666;
  font-size: 1.1rem;
  margin-bottom: 40px;
}

.card-item i {
  font-size: 24px;
  margin-right: 15px;
  color: #E3D7C7;
}

.card-item span {
  font-size: 1.1rem;
}
</style>
